import React, { useState } from 'react';

import { Button } from 'dw-mx';
import { Modal } from 'dw-mx';
import { ExclamationCircleOutlined } from 'dw-mx-icons';

export default function ConfirmBeforeClose() {
    const [modal, updateModal] = useState({
        open: false,
        props: {},
    });

    const openModal = async () => {
        updateModal({
            open: true,
            props: {
                xm: '小明',
                age: 18,
            },
        });
    };

    const handleCancel = async () => {
        Modal.confirm({
            icon: <ExclamationCircleOutlined />,
            title: '提示',
            content: '确认要关闭么?',
            onOk() {
                updateModal({
                    open: false,
                    props: {},
                });
            },
            onCancel() {},
        });
    };

    const handleOk = async () => {
        updateModal({
            open: false,
            props: {},
        });
    };

    return (
        <div>
            {modal.open && (
                <Modal title="人员信息" visible={true} onOk={() => handleOk()} onCancel={() => handleCancel()}>
                    Hello World!
                </Modal>
            )}

            <Button onClick={() => openModal()}>弹出</Button>
        </div>
    );
}
